<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>笑脸制作</title>
</head>

<body>
    <div style="text-align: center;">
        <canvas id="canvasElem">
            
        </canvas>
        <footer>WYH 2023/11/10</footer>
    </div>

    <script>
        var canvas = document.getElementById('canvasElem');
        var context = canvas.getContext('2d');
        context.lineWidth = '10'; //设置线宽
        context.strokeStyle = '#f00'
        context.lineCap = 'round';
        canvas.width = 980;
        canvas.height = 600;
        canvas.style.border = '1px solid #aaa';

        //笑脸制作
        context.beginPath(); //开始路径
        context.fillStyle = 'orange'; //设置颜色
        context.arc(200, 200, 100, 0, 2 * Math.PI, true) //绘制一个圆（坐标起点(x, y),半径，弧度，逆时针？）
        context.closePath(); //关闭路径
        context.stroke(); //描边
        context.fill(); //填充
        //绘制左眼
        context.beginPath(); //开始路径
        context.strokeStyle = '#fff'; //填充颜色
        context.lineWidth = 3;
        context.arc(170, 160, 20, 0, Math.PI, true); //绘制圆弧
        context.stroke(); //描边
        //绘制右眼
        context.beginPath(); //开始路径
        context.strokeStyle = '#fff'; //描边颜色
        context.lineWidth = 3;
        context.arc(230, 160, 20, 0, Math.PI, true); //绘制圆弧
        context.stroke(); //描边
        // 绘制嘴巴下弧线
        context.beginPath(); //开始路径
        context.strokeStyle = '#fff'; //描边颜色
        context.lineWidth = 2;
        context.arc(200, 210, 50, 0, Math.PI, false); //绘制圆弧
        context.stroke(); //描边
        // 绘制嘴巴上弧线
        context.beginPath(); //开始路径
        context.strokeStyle = '#fff'; //描边颜色
        context.lineWidth = 2;
        context.arc(200, 200, 50, 0.05 * Math.PI, 0.95 * Math.PI, false); //绘制圆弧
        context.stroke(); //描边

        // 绘制矩形
        context.strokeRect(112, 10, 30, 30);
        context.fillRect(0, 0, 50, 50);
        // 清除
        context.clearRect(10, 10, 30, 30);
        context.clearRect(112, 10, 10, 10);


        // 绘制三角形
        context.beginPath(); //开始路径
        context.moveTo(200, 300); //定义起点位置
        context.lineTo(300, 500); // 端点
        context.lineTo(100, 500); // 端点
        context.closePath(); //结束路径
        context.stroke(); //描边
        context.fill(); //填充（端点间覆盖的区域）
    </script>
</body>

</html>